<!--
    https://dzone.com/articles/visualizing-time-series-data-with-dygraphs
-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="UTF-8">
        <title>Dygraph demo</title>
       
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
       
    </head>

    <body>
        <h3 style="width: 800px;text-align: center;">Live Random data(not able to see history data)</h3>
        <div id="div_g" style="width: 800px;height: 400px;"></div>

        <script>
            //下面这种显示不好，似乎是每次一起刷新10个点，而不是让时间缓慢地向左移动
            //https://blog.csdn.net/zzz_781111/article/details/48290913
            var data = [];
            var t = new Date();
            for (var i=10; i>=0; i--) {
                var x = new Date(t.getTime() - i*1000);
                data.push([x, Math.random()]);
            }

            var g = new Dygraph(document.getElementById("div_g"), data, {
                drawPoints: true,
                showRoller: true,
                valueRange: [0.0, 1.2],
                labels: ['Time', 'Random']
            });
            setInterval(() => {
                var data = [];
                var t = new Date();
                for (var i = 10; i >= 0; i--) {
                    // getTime() 返回自1970之间的ms 数
                    var x = new Date(t.getTime() - i * 1000);
                    data.push([x, Math.random()]);
                }
             
                g.updateOptions( { 'file': data } );
            }, 5000);
        </script>
    </body>
</html>